<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        main {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        div {
            width: 1200px;
            height: 140px;  
            display: flex;
            text-align: center;
            margin: 0 auto;
            text-align: center;
        }

        ul {
            width: 100px;
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            display: none;
        }

        nav {
            width: 100px;
            height: 30px;
            line-height: 30px;
        }

        a {
            display: inline-block;
            width: 99px;
            height: 30px;
            border: 1px solid #aaa;
            text-decoration: none;
            color: #555;
        }

        p {
            width: 200px;
            height: 30px;
            /* border: 1px solid violet; */
            text-align: center;
        }
    </style>
</head>

<body>
    <main>
        <div>
            <nav>
                <a href="">销售订单</a>
                <ul class="ul-sub">
                    <li><a href="#">订单1</a></li>
                    <li><a href="#">订单2</a></li>
                    <li><a href="#">订单3</a></li>
                </ul>
            </nav>
            <nav>
                <a href="">消费订单</a>
                <ul class="ul-sub">
                    <li><a href="#">消费1</a></li>
                    <li><a href="#">消费2</a></li>
                    <li><a href="#">消费3</a></li>
                </ul>
            </nav>
        </div>
        <p></p>
    </main>


    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $(document).ready(function () {
        var index = 0;
        $('nav').hover(function () {
            $(this).find('.ul-sub').show();
        }, function () {
            $(this).find('.ul-sub').hide()
        });
        $('li').hover(function () {
            $(this).css('background-color', '#aaa');

        }, function () {
            $(this).css('background-color', '#fff')
        });
        $('li').click(function () {
            $('p').text($(this).text());
        });
    });

</script>